<template>
  
	
  <el-row type="flex" style="padding: 5px;height:50px;-webkit-app-region:drag;">
    <el-col :span="10">
      <a href="javascript:;" @click="gotouser" style="float:left;-webkit-app-region: no-drag;"><img class="headimg" :src="headimg"/></a>
      <p style="margin-top:20px;">
      <i @click="openwin" class="iconfont icon-guangchangjieshao daohang aicon headdao"></i>
      <i @click="openbrowser" class="iconfont icon-liulanqi daohang aicon headdao"></i>
      <i @click="openfavorite" class="iconfont icon-shoucang2 daohang aicon headdao"></i>
      </p>
      
    </el-col>
    <el-col :span="6"><span style="line-height:55px;">云收藏</span></el-col>
    <el-col :span="8">
      <a href="javascript:;" class="abutton" @click="hideindex"><i class="el-icon-circle-cross chois aicon"></i></a>
      <a href="javascript:;" class="abutton" @click="fixindex">
        <i class="el-icon-circle-check aicon" v-bind:class="{ lockchecked: lockchecked }"></i>
      </a>
      <a href="javascript:;" class="abutton" @click="showindex">
        <i v-bind:class="[miniwindow ? 'el-icon-caret-bottom' : 'el-icon-caret-top']" class="aicon"></i>
      </a>
    </el-col>
  </el-row>

  
</template>
<script>
  export default {
    name: 'indexhead',
    data () {
      return {
        lockchecked: false,
        miniwindow: false
      }
    },
    methods: {
      hideindex: function () {
        const BrowserWindow = this.H.electron.remote.BrowserWindow
        const win = BrowserWindow.getFocusedWindow()
        win.hide()
      },
      fixindex: function () {
        const BrowserWindow = this.H.electron.remote.BrowserWindow
        const win = BrowserWindow.getFocusedWindow()
        if (win.isMovable()) {
          win.setMovable(false)
          this.lockchecked = true
        } else {
          win.setMovable(true)
          this.lockchecked = false
        }
      },
      showindex: function () {
        const BrowserWindow = this.H.electron.remote.BrowserWindow
        const win = BrowserWindow.getFocusedWindow()
        const obj = win.getSize()
        if (obj[1] !== 60) {
          win.setSize(obj[0], 60)
          // win.setResizable(false)
          this.miniwindow = true
        } else {
          win.setSize(obj[0], 630)
          // win.setResizable(true)
          this.miniwindow = false
        }
      },
      gotouser: function () {
        this.H.openwin('/user/usertopic', 'userinfo')
      },
      openwin: function () {
        this.H.openwin('/square', 'square', true)
      },
      openbrowser: function () {
        this.H.openwin('/browser', 'browser')
      },
      openfavorite: function () {
        this.H.openwin('/favorite', 'favorite', false, 200, 300)
      }
    },
    computed: {
      headimg: function () {
        let userinfo = this.$store.state.userinfo
        return userinfo && userinfo.headimg ? userinfo.headimg : 'static/login.png'
      }
    },
    mounted: function () {
      const BrowserWindow = this.H.electron.remote.BrowserWindow
      const win = BrowserWindow.getFocusedWindow()
      if (win) {
        const obj = win.getSize()
        if (win.isMovable()) {
          this.lockchecked = false
        } else {
          this.lockchecked = true
        }
        if (obj[1] !== 60) {
          this.miniwindow = false
        } else {
          this.miniwindow = true
        }
      }
    }
  }
</script>

<style scoped>
  .chois:hover{
    color:red;
  }
  .lockchecked{
    color: #20e844;
  }
  .abutton{
    line-height:20px;
    display:block;
    float:right;
    -webkit-app-region: no-drag;
    padding: 2px;
  }
  .headimg{
    width:40px;
    height:40px;
    border-radius:50%;
    cursor:pointer;
  }
  .headdao{
    margin-right: 5px;
    -webkit-app-region: no-drag;
    cursor:pointer;
  }
</style>
